<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="600px" height="600px"></canvas>
		<script type="text/javascript">
			const mycanvas = document.getElementById('mycanvas');
			const ctx = mycanvas.getContext('2d');
			ctx.translate(300 , 300);
			
			var i = 0;
			setInterval(() =>{
				ctx.clearRect(-250 , -250 , 500 , 500);
				ctx.save();
				ctx.beginPath();
				ctx.strokeStyle = 'mediumpurple';
				ctx.arc(0 , 0 , 200 , 0 , Math.PI * 2 , true);
				ctx.stroke();
				ctx.closePath();
				
				ctx.globalCompositeOperation = 'destination-over';
				
				ctx.beginPath();
				console.log(18 * i);
				ctx.rotate(Math.PI / 18 * i);
				ctx.translate(0 , -200);
				ctx.arc(0 , 0 , 30 , 0 , Math.PI *2 , true);
				ctx.fillStyle = 'rgba(0, 128, 0 , 0.5)';
				ctx.fill();
				ctx.closePath();
				ctx.restore();
				
				i ++;
				if(i >= 36) {
					i = 0;
				}
			} , 100);
		</script>
	</body>
</html>
